<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="keywords" content="admin, dashboard, bootstrap, template, flat, modern, theme, responsive, fluid, retina, backend, html5, css, css3">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>房地产大数据分析平台</title>

  
  <!--common-->
  <link href="/newIndex/css/style.css" rel="stylesheet">
  <link href="/newIndex/css/style-responsive.css" rel="stylesheet">
  <script type="text/javascript" src="/javascripts/source/jquery.min.js"></script>




  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
</head>

<body class="sticky-header">
<section>
    <!-- left side start-->
    <div class="left-side sticky-left-side">

        <!--logo and iconic logo start-->
        <div class="logo">
        房地产大数据分析平台
           <!--  <a href=""><img src="images/logo.png" alt=""></a> -->
        </div>

        <div class="logo-icon text-center">
        
            <a href=""><img src="images/logo.png" alt=""></a>
        </div>
        <!--logo and iconic logo end-->

        <div class="left-side-inner">

            <!-- visible to small devices only -->
            <div class="visible-xs hidden-sm hidden-md hidden-lg">
                <div class="media logged-user">
                    <img alt="" src="images/user1.png" class="media-object">
                    <div class="media-body">
                        <h4><a href="#">John Doe</a></h4>
                        <span>"Hello There..."</span>
                    </div>
                </div>

                <h5 class="left-nav-title">Account Information</h5>
                <ul class="nav nav-pills nav-stacked custom-nav">
                  <li><a href="#"><i class="fa fa-user"></i> <span>Profile</span></a></li>
                  <li><a href="#"><i class="fa fa-cog"></i> <span>Settings</span></a></li>
                  <li><a href="#"><i class="fa fa-sign-out"></i> <span>Sign Out</span></a></li>
                </ul>
            </div>

            <!--sidebar nav start-->
            <ul class="nav nav-pills nav-stacked custom-nav">
                <li class="active"><a href="index.html"><i class="fa fa-home"></i> <span>首页</span></a></li>
                <li class="menu-list"><a href=""><i class="fa fa-laptop"></i> <span>图表统计</span></a>
                    <ul class="sub-menu-list">
                        <li><a href=""> 信息图</a></li>
                        <li><a href=""> 复合图</a></li>
                        <li><a href=""> 区域地图</a></li>
                        <li><a href=""> 地铁地图</a></li>   
                    </ul>
                </li>
                <li ><a href=""><i class="fa fa-home"></i> <span>报表展示</span></a></li>
               

            </ul>
            <!--sidebar nav end-->

        </div>
    </div>
    <!-- left side end-->
    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

            <!--search start-->
            <form class="searchform" action="index.html" method="post">
                <input type="text" class="form-control" name="keyword" placeholder="Search here..." />
            </form>
            <!--search end-->

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="images/user1.png" alt="" />
                            yun
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                            <li><a href="#"><i class="fa fa-user"></i>  Profile</a></li>
                            <li><a href="#"><i class="fa fa-cog"></i>  Settings</a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> Log Out</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->
        <%- include('indexMap'); %>
        <%- include('NewIndexGraph');%>
        
    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="/newIndex/js/jquery-1.10.2.min.js"></script>
<script src="/newIndex/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/newIndex/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/newIndex/js/bootstrap.min.js"></script>
<script src="/newIndex/js/modernizr.min.js"></script>
<script src="/newIndex/js/jquery.nicescroll.js"></script>



<!--common scripts for all pages-->
<script src="/newIndex/js/scripts.js"></script>

</body>
</html>
<script type="text/javascript" src="/javascripts/source/highmaps.js"></script>
<script type="text/javascript" src="/javascripts/source/mapData.js"></script>
<script type="text/javascript" src="/javascripts/source/drilldown.js"></script>
<script type="text/javascript" src="/javascripts/source/chinaMap.js"></script>
<script type="text/javascript">

$(function () {

    // $.ajax({
    //                  type: "GET",
    //                  url: "/test",                     
    //                  dataType: "json",
    //                  success: function(data){
    //                             for(var i in data.blocklist){
    //                                console.log(data.blocklist[i][0].title);
    //                             }
    //                  },
    //                  error:function(msg){
    //                    console.log(msg);
    //                  }
    //       });


    Highcharts.setOptions({
        lang:{
            drillUpText:"返回 > {series.name}"
        }
    });
    var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']),small = $('#indexMap').width() < 400;
    // 给城市设置随机数据
    $.each(data, function (i) {
        this.drilldown = this.properties['drill-key'];
        this.value = i;
    });
    //初始化地图
    $('#indexMap').highcharts('Map', {
        chart : {
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions) {
                        var chart = this;                             
                        var cname=e.point.properties["cn-name"];
                       
                        /****************更新右侧图表组件******************/
                         $('.city-name').text(cname);


                        chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>');
                        // 加载城市数据
                        $.ajax({
                            type: "GET",
                            url: "http://data.hcharts.cn/jsonp.php?filename=GeoMap/json/"+ e.point.drilldown+".geo.json",
                            contentType: "application/json; charset=utf-8",
                            dataType:'jsonp',
                            crossDomain: true,
                            success: function(json) {
                                data = Highcharts.geojson(json);
                                $.each(data, function (i) {
                                    this.value = i;
                                });
                                chart.hideLoading();
                                console.log(data);
                                chart.addSeriesAsDrilldown(e.point, {
                                    name: e.point.name,
                                    data: data,
                                    dataLabels: {
                                        enabled: true,
                                        format: '{point.name}'
                                    },
                                    cursor:'pointer',
                                    events:{
                                        click:function(e){
                                            $('.city-name').text(e.point.name);
                                            location.href = '/beijing';
                                             /****************更新右侧图表组件******************/



                                        }
                                    }
                                });
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {

                            }
                        });
                    }


                    this.setTitle(null, { text: cname });
                },
                drillup: function () {
                    this.setTitle(null, { text: '中国' });
                }
            }
        },
        credits:{
            href:"http://www.peng8.net/",
            text:"www.peng8.net"
        },
        title : {
            text : '中国地图'
        },
        subtitle: {
            text: '中国',
            floating: true,
            align: 'right',
            y: 50,
            style: {
                fontSize: '16px'
            }
        },
        legend: small ? {} : {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        //tooltip:{
        //pointFormat:"{point.properties.cn-name}:{point.value}"
        //},
        colorAxis: {
            min: 0,
            minColor: '#E6E7E8',
            maxColor: '#005645'
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        plotOptions: {
            map: {
                states: {
                    hover: {
                        color: '#EEDD66'
                    }
                }
            }
        },
        series : [{
            data : data,
            name: '中国',
            dataLabels: {
                enabled: true,
                format: '{point.properties.cn-name}'    
            }
        }],
        drilldown: {

            activeDataLabelStyle: {
                color: '#FFFFFF',
                textDecoration: 'none',
                textShadow: '0 0 3px #000000'
            },
            drillUpButton: {
                relativeTo: 'spacingBox',
                position: {
                    x: 0,
                    y: 60
                }
            }
        }
    });
});
     
</script>

